<template>
	<view class="container">
		<button @click="getIPLocation">获取IP定位信息</button>
		<view v-if="ipLocationInfo">
			<view>IP定位信息：</view>
			<view>省份：{{ ipLocationInfo.province }}</view>
			<view>城市：{{ ipLocationInfo.city }}</view>
			<view>区域编码(adcode)：{{ ipLocationInfo.adcode }}</view>
			<view>矩形区域范围：{{ ipLocationInfo.rectangle }}</view>
			<button @click="getWeather">获取天气信息</button>
			<view v-if="weatherInfo">
				<view>当前天气：{{ weatherInfo.weather }}</view>
				<view>温度：{{ weatherInfo.temperature }}℃</view>
				<view>风向：{{ weatherInfo.winddirection }}</view>
				<view>风力：{{ weatherInfo.windpower }}</view>
				<view>湿度：{{ weatherInfo.humidity }}%</view>
			</view>
			<button @click="getReGeocode">逆地理编码</button>
			<view v-if="addressInfo">
				<view>地理位置信息：</view>
				<view>国家：{{ addressInfo.addressComponent.country }}</view>
				<view>省：{{ addressInfo.addressComponent.province }}</view>
				<view>市：{{ addressInfo.addressComponent.city }}</view>
				<view>区县：{{ addressInfo.addressComponent.district }}</view>
				<view>街道：{{ addressInfo.addressComponent.township }}</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';

	const ipLocationInfo = ref(null);
	const weatherInfo = ref(null);
	const addressInfo = ref(null);
	const ak = '171f867864d97f780e5c0c6be10341db'; // 替换为自己的高德API Key

	let city = ''; // 用于存储IP定位获取到的城市信息
	let location = ''; // 用于存储经纬度信息

	const getIPLocation = () => {
		uni.request({
			url: `https://restapi.amap.com/v3/ip?key=${ak}`,
			method: 'GET',
			success: (res) => {
				console.log(res.data);
				if (res.statusCode === 200 && res.data.status === '1') {
					const data = res.data;
					ipLocationInfo.value = data;
					// 假设IP定位返回的经纬度信息在rectangle字段中
					// rectangle格式为"左下角经纬度;右上角经纬度"，我们取左下角经纬度
					location = data.rectangle.split(';')[0];
				} else {
					console.error('IP定位失败:', res.data.info);
				}
			},
			fail: (err) => {
				console.error('请求失败:', err);
			}
		});
	};

	const getWeather = () => {
		if (!ipLocationInfo.value || !ipLocationInfo.value.city) {
			uni.showToast({
				title: '请先获取IP定位信息',
				icon: 'none'
			});
			return;
		}
		city = ipLocationInfo.value.city; // 从ipLocationInfo中获取城市信息
		uni.request({
			url: `https://restapi.amap.com/v3/weather/weatherInfo?key=${ak}&city=${city}`,
			method: 'GET',
			success: (res) => {
				console.log(res.data);
				if (res.statusCode === 200 && res.data.status === '1') {
					weatherInfo.value = res.data.lives[0];
				} else {
					console.error('获取天气失败:', res.data.info);
				}
			},
			fail: (err) => {
				console.error('请求天气接口失败:', err);
			}
		});
	};
 
//location 经纬度  ak 高德api key
	const getReGeocode = () => {
		if (!location) {
			uni.showToast({
				title: '请先获取IP定位信息',
				icon: 'none'
			});
			return;
		}
		uni.request({
			url: `https://restapi.amap.com/v3/geocode/regeo?location=${location}&key=${ak}&extensions=all`,
			method: 'GET',
			success: (res) => {
				console.log(res.data);
				if (res.statusCode === 200 && res.data.status === '1') {
					addressInfo.value = res.data.regeocode;
				} else {
					console.error('逆地理编码失败:', res.data.info);
				}
			},
			fail: (err) => {
				console.error('请求失败:', err);
			}
		});
	};
</script>
<style scoped>
</style>